<template>
	<view>

		<view >

			<uni-datetime-picker :border="false" style="margin-top: 20rpx;" v-model="range" type="daterange"
				@change="changeLog" />
			<view style="display: flex;">
				<uni-data-select @change="query" class="choose-type" placeholder="请选择楼栋" v-model="dong"
					:localdata="dongArr">
				</uni-data-select>

				<uni-data-select class="choose-type" placeholder="请选择楼层" v-model="ceng" :localdata="cengArr"
					@change="query">
				</uni-data-select>
				<!-- {{suseArr.length==0}} -->
				<uni-data-select class="choose-type" placeholder="请选择宿舍" v-model="suse" :localdata="suseArr"
					@change="queryData">
				</uni-data-select>
			</view>

			<view style="margin-top:30rpx">
				<view v-if="abnormalArr.length <= 0">
					<div style="text-align:center;color: #ccc;">
						当前日期没有数据,选择日期查看更多
					</div>
					
				</view>
		
				<view v-if="topName=='考勤'"  v-for="(item,index) in abnormalArr" :key="index" style="margin: 20rpx 0 20rpx;">
					<view class="row mainContentWrap" @click="abnormalIndexSkip(item)">
						<view style="color: #2934D1;flex:1;text-align: center">
							{{item.studentName}}
						</view>
						<view style="color: #2934D1;flex:1;text-align: center">
							{{item.buildingNo}}{{item.dormitoryNo }}
						</view>
						<view v-if="item.attenceStatus==2" style="color: hotpink;flex:1;text-align: center" 
						>
						
							{{item.attenceStatus | status}}
						</view>
						<view v-else style="color: #ccc;flex:1;text-align: center"
						>
						
							{{item.attenceStatus | status}}
						</view>

					

					</view>
				</view>
				
				<view v-if="topName=='报修'"  v-for="(item,index) in abnormalArr" :key="index" style="margin: 20rpx 0 20rpx;">
					<view class="row mainContentWrap" >
						
						<view style="color: #2934D1;flex:1;text-align: center">
							{{item.buildingNo}}{{item.dormitoryNo }}
						</view>
						
						<view style="color: #ccc;flex:2;text-align: center;font-size: 28rpx;">
							{{item.createTime}}
						</view>
						
						
						<view v-if="item.status==2" style="color: hotpink;flex:1;text-align: center" 
						>
						
							{{item.status | statusbaoxiu}}
						</view>
						<view v-else style="color: #ccc;flex:1;text-align: center"
						>
						
							{{item.status | statusbaoxiu}}
						</view>
						
						
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	export default {
		data() {

			return {
				dong: '',
				ceng: '',
				suse: '',

				dongArr: [],
				cengArr: [],
				suseArr: [],
				abnormalArr: [],
				startDate: '',
				endDate: '',
				patrolType: '',
				range: [],
				rangeType: [{
						value: '',
						text: "全部"
					}, {
						value: "2",
						text: "入校"
					},
					{
						value: "3",
						text: "课堂"
					},
					{
						value: "4",
						text: "午休"
					}, {
						value: "5",
						text: "晚自习"
					}, {
						value: "6",
						text: "课间"
					}, {
						value: "1",
						text: "宿舍"
					},
				],
				range: [],
				userName: '',
				topName: '值班数据',
				id: '',

			}
		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
		filters: {
			statusbaoxiu(data){
				if (data == 0) {
					return "已报修"
				} else if (data == 1) {
					return "处理中"
				} else if (data == 2) {
					return "正常"
				} else if (data == 3) {
					return "待报修"
				}
			},
			status(data) {
				// console.log(data)
				if (data == 1) {
					return "正常"
				} else if (data == 2) {
					return "未归寝"
				} else if (data == 3) {
					return "晚归"
				} else if (data == 4) {
					return "请假"
				}
			}
		},

		async onLoad(options) {



			this.topName = options.name;


			var that = this
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})

			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			month = month > 10 ? month : '0' + month; //个位数前面补零
			var day = date.getDate() > 10 ? date.getDate() : '0' + date.getDate();
			var str = `${year}-${month}-${day}`;
			this.startDate = str;
			// alert(this.startDate)

			this.endDate = str;

			this.range = [str, str]

			uni.request({
				url: uni.url + 'Dorm/findDormBuilding',
				success: res => {

					this.dongArr = res.data.data;
					this.dongArr = this.dongArr.map(item => {
						var obj = {
							'text': item.dictLabel,
							'value': item.dictValue
						}
						return obj;
					})
					console.log(this.dongArr)

					uni.request({
						url: uni.url + 'Dorm/findDormStorey',
						success: res => {

							this.cengArr = res.data.data;
							this.cengArr = this.cengArr.map(item => {
								var obj = {
									'text': item.dictLabel,
									'value': item.dictValue
								}
								return obj;

							})


						}
					})
				}
			})


			this.queryData();

			// dongArr:[],
			// cengArr:[],
			// suseArr:[],
		},
		methods: {
			abnormalIndexSkip(item) {
				var str = JSON.stringify(item);
				uni.navigateTo({
					url: "/pages/classManagement/listDetail?str=" + str
				})
			},
			queryData() {
				this.$nextTick(() => {
					// alert(this.startDate)
					var data = {
						"startDate": this.startDate,
						"endDate": this.endDate,
						"buildingNo": this.dong,
						"storey": this.ceng,
						"dormitoryNo": this.suse,
					}

					var url = "";
					if (this.topName == '考勤') {
						url = "Dorm/findAttenceList";
					} else if (this.topName == '卫生') {

					} else if (this.topName == '报修') {
						url = "Dorm/findRepairList";
					}
					uni.request({
						method: 'post',
						url: uni.url + url,
						data: data,
						success: res => {
							console.log(res);
							this.abnormalArr = res.data.data;
						}
					})
				})
			},
			// ===> APP端查询宿舍考勤数据列表
			// 	Request URL: /app/Dorm/findAttenceList
			// 	Request Method: POST
			// 	{
			// 		"startDate":"",
			// 		"endDate":"",
			// 		"buildingNo":"",
			// 		"storey":"",
			// 		"dormitoryNo":"",
			// 	}
			changeLog(e) {
				this.startDate = e[0],
					this.endDate = e[1];

				this.$nextTick(() => {
					var data = {
						"startDate": e[0],
						"endDate": e[1],
						"buildingNo": this.dong,
						"storey": this.ceng,
						"dormitoryNo": this.suse,
					}

					var url = "";
					if (this.topName == '考勤') {
						url = "Dorm/findAttenceList";
					} else if (this.topName == '卫生') {

					} else if (this.topName == '报修') {
						url = "Dorm/findRepairList";
					}
					uni.request({
						url: uni.url + url,
						data: data,
						method: 'post',
						success: res => {
							console.log(res);
							this.abnormalArr = res.data.data;

						}
					})
				})



			},
			query() {
				// if (this.dong == '') {
				// 	uni.showToast({
				// 		title: "请选择楼栋"
				// 	})
				// 	return;
				// }
				// if (this.ceng == '') {
				// 	uni.showToast({
				// 		title: "请选择楼层"
				// 	})
				// 	return;
				// }
				this.$nextTick(() => {
					uni.request({
						url: uni.url + 'Dorm/findDorm',
						data: {
							"buildingNo": this.dong,
							"storey": this.ceng,
						},
						method: 'post',
						success: res => {
							console.log(res);
							this.suseArr = res.data.data;

							this.suseArr = this.suseArr.map(item => {
								var obj = {
									'text': item,
									'value': item
								}
								return obj;

							})

							this.queryData();

						}
					})
				})

			}

		},

	}
</script>

<style lang="scss">
	.pink{
		color: deeppink;
	}
	// .choose-type /deep/ .uniui-clear{
	// 	color: white !important;
	// }
	/deep/ .uni-select {
		border: unset;
		padding: 20rpx 20rpx 0 50rpx;
	}

	.mainContentWrap {

		border-bottom: #e9e9ee solid 1rpx;
		height: 70rpx;
		border-radius: 5rpx;
		// margin-top: 10rpx;
		width: 86%;
		margin: 0 auto;
		margin-left: 22rpx;
		// box-shadow: 0upx 0upx 3upx 0upx #8F8F94;
		display: flex;
		justify-content: space-between;
		align-content: space-around;
		align-items: center;

	}

	.row {
		display: flex;
		justify-content: space-around;
		padding: 10rpx 30rpx;

	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexTeacher2 {
		margin: auto;
		margin-top: 40upx;
		width: 605upx;
		height: 76upx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-5.png);
		background-size: 100%;
		color: white;
		padding-top: 30upx;
		font-size: 30rpx;
		/* opacity: 0.8; */
	}

	.indexTeacher0 {
		margin: auto;
		margin-top: 40upx;
		width: 605upx;
		height: 76upx;
		display: flex;
		justify-content: space-between;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/T-6.png);
		background-size: 100%;
		color: white;
		padding-top: 30upx;
		font-size: 30rpx;
		/* opacity: 0.8; */
	}


	.indexContent {
		height: 100vh
	}

	.indexContent2 {
		height: 100vh !important
	}
</style>
